<template>
  <div>
    <el-card>
      <el-form ref="fromRef" :inline="true" :rules="fromRules" :model="formInline" class="demo-form-inline">
        <el-form-item label="库区编号" prop="code">
          <el-input v-model="formInline.code" disabled placeholder="请输入" />
        </el-form-item>
        <el-form-item label="所属仓库" prop="type">
          <el-select v-model="formInline.warehouseId" placeholder="请选择">
            <el-option v-for="item in nameList" :key="item.warehouseId" :label="item.name" :value="item.warehouseId" />
          </el-select>
        </el-form-item>
        <el-form-item label="库区名称" prop="name">
          <el-input v-model="formInline.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="温度类型" prop="temperatureType">
          <el-select v-model="formInline.temperatureType" placeholder="请选择">
            <el-option label="常温" value="CW" />
            <el-option label="恒温" value="HW" />
            <el-option label="冷藏" value="LC" />
          </el-select>
        </el-form-item>
        <el-form-item label="承重类型" prop="bearingType">
          <el-select v-model="formInline.bearingType" placeholder="请选择">
            <el-option label="重型" value="ZX" />
            <el-option label="中型" value="BX" />
            <el-option label="轻型" value="QX" />
          </el-select>
        </el-form-item>
        <el-form-item label="用途属性" prop="useType">
          <el-select v-model="formInline.useType" placeholder="请选择">
            <el-option label="入库缓存区" value="RKHCQ" />
            <el-option label="出库缓存区" value="CKHCQ" />
            <el-option label="存储区" value="CCQ" />
            <el-option label="分拣区" value="FJQ" />
            <el-option label="质检区" value="ZJQ" />
          </el-select>
        </el-form-item>
        <el-form-item label="负责人" prop="personName">
          <el-input v-model="formInline.personName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="formInline.phone" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="status" label="仓库状态" placeholder="请选择" class="radio">
          <el-radio v-model="formInline.status" label="1">启用</el-radio>
          <el-radio v-model="formInline.status" label="0">停用</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button @click="$router.go(-1)">返回</el-button>
          <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { addArea, getNextCode, getAreaList, mondifyArea, getAreaById } from '@/api'
export default {
  data() {
    return {
      status: {
        0: '停用',
        1: '启用'
      },
      nameList: [],
      formInline: {
        code: '',
        warehouseId: '',
        name: '',
        temperatureType: '',
        bearingType: '',
        useType: '',
        personName: '',
        phone: '',
        status: '1'
      },
      fromRules: {
        code: [{ required: true, message: '此项为必填项', trigger: 'blur' }],
        name: [{ required: true, message: '此项为必填项', trigger: 'blur' }],
        warehouseId: [{ required: true, message: '此项为必填项', trigger: 'blur' }],
        temperatureType: [{ required: true, message: '此项为必填项', trigger: 'blur' }],
        bearingType: [{ required: true, message: '此项为必填项', trigger: 'blur' }],
        status: [{ required: true, message: '此项为必填项', trigger: 'blur' }],
        useType: [{ required: true, message: '此项为必填项', trigger: 'blur' }],
        personName: [{ required: true, message: '此项为必填项', trigger: 'blur' }],
        phone: [
          { required: true, message: '此项为必填项', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    if (this.$route.query.id) {
      this.$route.meta.title = '编辑仓库'
      const { data } = await getAreaById(this.$route.query.id)
      this.formInline = data
      this.formInline.status = data.status + ''
    } else {
      const { data } = await getNextCode('KQ')
      this.formInline.code = data
      const res = await getAreaList({ status: 1 })
      // console.log(res)
      this.nameList = res.data
    }
  },
  methods: {
    submit() {
      this.$refs.fromRef.validate(async valid => {
        if (!valid) return
        if (!this.$route.query.id) {
          await addArea(this.formInline)
          this.$message.success('新增仓库成功')
        } else {
          await mondifyArea(this.formInline)
          this.$message.success('编辑仓库成功')
        }
      })
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form.demo-form-inline.el-form--inline{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.el-form-item {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
  justify-items: center;
  width: 360px;
  margin-left: 30px;
  &.radio{
    width: 400px;
  }
  &:last-child{
    width: 100%;
    ::v-deep  .el-form-item__content{
      display: flex;
      justify-content: center;
      align-content: center;
    }
  }
::v-deep .el-form-item__content{
  flex: 1;
  width: 100%;
  .el-select{
    width: 100%;
  }
  .el-input__inner{
    background-color: #f8f5f5;
  }
  .el-button{
    width: 170px;
    height: 40px;
    padding:1px 15px;
    margin: 16px;
    color: #000;
    border-radius: 20px;
  }
}
}
</style>
